.splitpanes {
  display: flex;
  width: 100%;
  height: 100%
}

.splitpanes--vertical {
  flex-direction: row
}

.splitpanes--horizontal {
  flex-direction: column
}

.splitpanes--dragging * {
  user-select: none
}

.splitpanes__pane {
  width: 100%;
  height: 100%;
  overflow: hidden
}

.splitpanes--vertical .splitpanes__pane {
  transition: width .2s ease-out
}

.splitpanes--horizontal .splitpanes__pane {
  transition: height .2s ease-out
}

.splitpanes--dragging .splitpanes__pane {
  transition: none
}

.splitpanes__splitter {
  touch-action: none
}

.splitpanes--vertical > .splitpanes__splitter {
  min-width: 1px;
  cursor: col-resize
}

.splitpanes--horizontal > .splitpanes__splitter {
  min-height: 1px;
  cursor: row-resize;
}

.splitpanes.default-theme .splitpanes__pane {
}

.splitpanes.default-theme .splitpanes__splitter {
  background-color: rgba(105, 105, 105, 0.16);
  box-sizing: border-box;
  position: relative;
  flex-shrink: 0
}

.dark .splitpanes.default-theme .splitpanes__splitter {
  background-color: rgba(255, 255, 255, 0.3);
  box-sizing: border-box;
  position: relative;
  flex-shrink: 0
}


.splitpanes.default-theme .splitpanes__splitter:first-child {
  cursor: auto
}

.default-theme.splitpanes .splitpanes .splitpanes__splitter {
  z-index: 1
}

.default-theme.splitpanes--vertical > .splitpanes__splitter, .default-theme .splitpanes--vertical > .splitpanes__splitter {
  width: 2px;
}

.default-theme.splitpanes--vertical > .splitpanes__splitter:before, .default-theme.splitpanes--vertical > .splitpanes__splitter:after, .default-theme .splitpanes--vertical > .splitpanes__splitter:before, .default-theme .splitpanes--vertical > .splitpanes__splitter:after {
  transform: translateY(-50%);
  width: 1px;
  height: 30px
}

.default-theme.splitpanes--vertical > .splitpanes__splitter:before, .default-theme .splitpanes--vertical > .splitpanes__splitter:before {
  margin-left: -2px
}

.default-theme.splitpanes--vertical > .splitpanes__splitter:after, .default-theme .splitpanes--vertical > .splitpanes__splitter:after {
  margin-left: 1px
}

.default-theme.splitpanes--horizontal > .splitpanes__splitter, .default-theme .splitpanes--horizontal > .splitpanes__splitter {
  height: 2px;
}

.default-theme.splitpanes--horizontal > .splitpanes__splitter:before, .default-theme.splitpanes--horizontal > .splitpanes__splitter:after, .default-theme .splitpanes--horizontal > .splitpanes__splitter:before, .default-theme .splitpanes--horizontal > .splitpanes__splitter:after {
  transform: translate(-50%);
  width: 30px;
  height: 1px
}

.default-theme.splitpanes--horizontal > .splitpanes__splitter:before, .default-theme .splitpanes--horizontal > .splitpanes__splitter:before {
  margin-top: -2px
}

.default-theme.splitpanes--horizontal > .splitpanes__splitter:after, .default-theme .splitpanes--horizontal > .splitpanes__splitter:after {
  margin-top: 1px
}
